<template>
	<view class="container">
		<view class="address">
		  <view class="cell">
			  <view class="information">
				  <view class="location">{{order.order_address[0]}}</view>
				  <view class="user">
					  <text>{{order.order_address[1]}}</text>
					  <text>{{order.order_address[2]}}</text>
				  </view>
			  </view>
		  </view>
		</view>
		<view class="detail">
			<view class="title">
				<image v-if="order.order_service=='1'" src="../../../static/home/feed.png"></image>
				<image v-if="order.order_service=='2'" src="../../../static/home/liu.png"></image>
				<image v-if="order.order_service=='3'" src="../../../static/home/jiyang.png"></image>
				<text v-if="order.order_service=='1'">上门喂宠</text>
				<text v-if="order.order_service=='2'">上门遛宠</text>
				<text v-if="order.order_service=='3'">寄养服务</text>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="card">
				<image :src="order.order_image"></image>
				<view class="xinxi">
					<view v-for="(item,index) in order.order_pet" :key="index">
						<view v-if="index==0||isexpand" class="pet">
							宠物{{index+1}}名字：{{item.pet_name}}
						</view>
						<view v-if="index==0||isexpand" class="pet">宠物{{index+1}}体型：
							<text v-if="item.pet_weight===0">小（10kg以下）</text>
							<text v-if="item.pet_weight===1">中（10kg-30kg）</text>
							<text v-if="item.pet_weight===2">大（30kg以上）</text>
						</view>
						<view v-if="index==0||isexpand" class="pet">宠物{{index+1}}性别：
							<text v-if="item.pet_gender===0">女</text>
							<text v-if="item.pet_gender===1">男</text>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;width: 100%;margin-bottom: 20rpx;">
				<uni-icons @click="changeExpand()" v-if="!isexpand" type="down"></uni-icons>
				<uni-icons @click="changeExpand()" v-if="isexpand" type="up"></uni-icons>
			</view>
			<view class="button">
				<view @click="gochat()" class="button-item">
					联系人员
				</view>
				<view @click="changestatus(6)" v-if="order.order_status!=='6'&&order.order_status!=='5'" class="button-item">
					退款
				</view>
			</view>
			<view class="pay">
				<view class="biaoti">
					付款金额
				</view>
				<view class="price">
					￥{{order.order_sum}}
				</view>
			</view>
			<view class="order">
				<view class="order-item">
					<view class="label">订单编号</view>
					<view class="miaoshu">{{order.order_id}}</view>
				</view>
				<view class="order-item">
					<view class="label">套餐类型</view>
					<view class="miaoshu">{{order.order_package}}</view>
				</view>
				<view class="order-item">
					<view class="label">下单时间</view>
					<view class="miaoshu">{{order.create_time}}</view>
				</view>
				<view class="order-item">
					<view class="label">支付方式</view>
					<view class="miaoshu">宠家支付</view>
				</view>
				<view class="order-item">
					<view class="label">服务人员</view>
					<view class="miaoshu">{{order.order_people.name}}</view>
				</view>
				<view class="order-item">
					<view class="label">服务时间</view>
					<view class="miaoshu">{{order.start_time}} - {{order.end_time}}</view>
				</view>
				<view class="order-item">
					<view class="label">订单备注</view>
					<view class="miaoshu">{{order.order_beizhu}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import http from "@/utils/request.js"
	onLoad((e)=>{
		order.value=JSON.parse(e.order)
		order.value.order_address=order.value.order_address.split(';').filter(Boolean)
	})
	
	let peopleinfo=ref({})
	let isexpand=ref(false)
	let order=ref({})
	function changeExpand(){
		isexpand.value=!isexpand.value
	}
	function changestatus(e){
		let response=http.post('/order/changestatus',{
			order_id:order.value.order_id,
			order_status:e
		})
		response.then(res=>{
			if(res.data.code===200){
				uni.showToast({
					title:'操作成功',
					duration:1000
				})
			}
		})
	}
	function gochat(){
		uni.navigateTo({
			url:"/pages/chat/message?peopleinfo="+JSON.stringify(order.value.order_people)
		})
	}
</script>

<style lang="scss">
	$pd:0 20rpx;
		.container{
			.address{
				position: relative;
				margin: 10rpx;
				
				.cell{
					width: 100%;
					height: 150rpx;
					box-sizing: border-box;
					display: flex;
					padding: $pd;
					align-items: center;
					justify-content: space-between;
					background-color: #ffffff;
					
					&:active{
						background-color: #efefef;
					}
					
					.information{
						display: flex;
						flex-direction: column;
						width: 80%;
						
						.location{
							font-size: 32rpx;
							font-weight: 500;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-bottom: 15rpx;
						}
						
						.user{
							display: flex;
							font-size: 28rpx;
							color: #8a898d;
							
							text{
								width: 40%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
			
			.detail{
				width: 100%;
				background-color: #ffffff;
				box-sizing: border-box;
				padding: 20rpx;
				
				.title{
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 30rpx;
					
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 5rpx;
					}
				}
				
				.card{
					display: flex;
					width: 100%;
					box-sizing: border-box;
					padding: 0 10rpx;
					
					image{
						width: 20%;
						height: 150rpx;
						margin-right: 20rpx;
					}
					
					.xinxi{
						width: 80%;
						// .type{
						// 	font-size: 30rpx;
						// 	margin-bottom: 20rpx;
						// }
						
						// .people{
						// 	color:#8d95a6;
						// 	font-size: 30rpx;
						// 	margin-bottom: 20rpx;
						// }
						
						.pet{
							font-size: 30rpx;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-bottom: 10rpx;
						}
					}
				}
				
				.button{
					display: flex;
					width: 100%;
					box-sizing: border-box;
					justify-content: flex-end;
					margin-bottom: 40rpx;
					padding: $pd;
					
					&-item{
						background-color: #f3f6f7;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 200rpx;
						height: 80rpx;
						margin-left: 20rpx;
					}
					
					&:active{
						opacity: 0.7;
					}
				}
				
				.pay{
					width: 100%;
					box-sizing: border-box;
					padding: $pd;
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;
					justify-content: space-between;
					
					.biaoti{
						font-size: 30rpx;
						letter-spacing: 0.1em;
					}
					
					.price{
						font-size: 32rpx;
						font-weight: 700;
					}
				}
				
				.order{
					width: 100%;
					box-sizing: border-box;
					padding: $pd;
					
					&-item{
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 40rpx;
						justify-content: space-between;
						
						.label{
							font-size: 30rpx;
							letter-spacing: 0.1em;
						}
						
						.miaoshu{
							max-width: 70%;
							color:#80889b;
							letter-spacing: 0.1em;
						}
					}
				}
			}
	}
</style>
